<template>
  <div class="mylogined_container">
      <myHead></myHead>
      <div class="login_container">
        <div class="nav">
          <span>首页</span>
          >
          <span>我的</span>
        </div>
        <div class="login">
          <div class="touxiang"></div>
          <p>欢迎你， <span class="username">18562469678</span></p>
        </div>
        <div class="myInfo">
          <ul>
            <li>
              <a href="javascript:;">
                <div class="left">
                  <span>我关注的房源</span>
                </div>
                <div class="right"></div>
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <div class="left">
                  <span>我关注的小区</span>
                </div>
                <div class="right"></div>
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <div class="left">
                  <span>我关注的记录</span>
                </div>
                <div class="right"></div>
              </a>
            </li>
          </ul>
        </div>
        <div class="quit">
          <router-link to="/login">退出登录</router-link>
          <!-- <a href="javascript:;">退出登录</a> -->
        </div>
      </div>
  </div>
</template>

<script>
import myHead from '@/components/myHead.vue'
export default {
  components: {
    myHead
  }
}
</script>

<style lang="less" scoped>
@color: #ff8a00;
@color1: #2f3130;
@vw: 3.20vw;
html {
  background-color: rgb(245, 245, 245);
}
.mylogined_container{

  .login_container {
    .nav {
      background-color: #fff;
      height: (37/@vw);
      font-size: (12/@vw);
      padding-left: (16/@vw);
      border-bottom: 1px solid rgb(197, 197, 197);

      span {
        line-height: (37/@vw);

        &:first-child {
          font-weight: 700;
        }
      }
    }

    .login {
      position: relative;
      background-image: url(../assets/image/my/bg2.png);
      height: (140/@vw);
      background-size: contain;

      .touxiang {
        width: (52/@vw);
        height: (52/@vw);
        background-image: url(../assets/image/my/urse2.png);
        background-size: contain;
        position: absolute;
        left: 50%;
        top: (25/@vw);
        transform: translate(-50%);
      }

      >p {
        color: white;
        font-size: (12/@vw);
        position: absolute;
        left: 50%;
        bottom: (25/@vw);
        transform: translateX(-50%);
      }
    }

    .myInfo {
      ul {
        background-color: #fff;
        border-bottom: 1px solid rgb(220, 220, 220);

        li {
          padding: 0px (20/@vw);

          a {
            display: flex;
            border-bottom: 1px solid rgb(220, 220, 220);
            justify-content: space-between;
            align-items: center;
            height: (50/@vw);

            .left {
              span {
                font-size: (12/@vw);
                color: rgb(102, 102, 102);
              }
            }

            .right {
              width: (8/@vw);
              height: (14/@vw);
              background: url(../assets/image/my/right.png);
              background-size: contain;
              background-repeat: no-repeat;
            }

          }

          &:last-child a {
            border: none;
          }
        }
      }
    }

    .quit {
      margin-top: (30/@vw);
      padding: 0px (10/@vw);

      a {
        display: block;
        height: (38/@vw);
        width: 100%;
        background-color: #fff;
        border: 1px solid rgb(220, 220, 220);
        text-align: center;
        line-height: (38/@vw);
        font-size: (12/@vw);
        color: rgb(255, 138, 0);
      }
    }

  }
}
</style>
